import GuatAction from "@/components/GuatActions/index.vue";

import { TableColumn } from "@/components/GuatTable/types";
import { Avatar, Space, Tag } from "@arco-design/web-vue";
import { MakeUpRecord } from "@/types/api/makeup";
import { MakeUpPropertyMap as MUPM } from "@/map/make-up/property-map";
import { MakeUpRecordStatus as MURS } from "@/constant/dictionary";
import { MemberPropertyMap as MPM } from "@/map/member/property-map";
import type { Action as AT } from "@/components/GuatActions/types";
import Permissions from "@/constant/permission";

interface Methods<T> {
  aud: (record: T) => void;
  chk: (record: T) => void;
  wtd: (record: T) => void;
}

const avatarSrc =
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp";

export const createTableColumns = (
  methods: Methods<MakeUpRecord["Table"]>
): TableColumn<MakeUpRecord["Table"]>[] => [
  {
    title: "标题",
    dataIndex: "title",
  },
  {
    title: "申请时间",
    dataIndex: "time",
  },
  {
    title: "申请人",
    render: () => (
      <Space size={[8, 0]}>
        <Avatar size={24}>
          <img src={avatarSrc} />
        </Avatar>
        <div>王涵越</div>
      </Space>
    ),
  },
  {
    title: "申请积分",
    render: ({ [MUPM.ApplyPoint]: score }) => <>{score} 分</>,
  },
  {
    title: "审核人",
    render: ({ [MUPM.Status]: status, [MUPM.Auditor]: auditor }) => {
      const isUnAudited = status == MURS.UNAUDITED;
      return (
        <Space size={[8, 0]}>
          {isUnAudited ? (
            "-"
          ) : (
            <>
              <Avatar size={24}>
                <img src={avatarSrc} />
              </Avatar>
              <div>{auditor[MPM.Name]}</div>
            </>
          )}
        </Space>
      );
    },
  },
  {
    title: "审核时间",
    dataIndex: "auditTime",
  },
  {
    title: "申请时间",
    dataIndex: "time",
  },
  {
    title: "当前状态",
    render: ({ [MUPM["Status"]]: status }) => {
      const color = {
        [MURS.UNAUDITED]: undefined,
        [MURS.PASSED]: "green",
        [MURS.UNPASSED]: "red",
      };
      return (
        <Tag size="large" color={color[status]}>
          {MURS[status as 0]}
        </Tag>
      );
    },
  },
  {
    showTitle: false,
    render: (record) => {
      // @ts-ignore
      const actions: ObjectType<AT[]> = {
        [MURS.UNAUDITED]: [
          {
            icon: "ph:stamp",
            color: "green",
            permission: Permissions.MAKEUP_RECORD_AUDIT,
            onClick: () => methods.aud(record),
          },
        ],
        [MURS.PASSED]: [
          { internal: "check", onClick: () => methods.chk(record) },
          {
            internal: "withdraw",
            permission: Permissions.MAKEUP_RECORD_WITHDRAW,
            onClick: () => methods.wtd(record),
          },
        ],
        [MURS.UNPASSED]: [{ internal: "check", onClick: () => methods.chk(record) }],
      };
      return <GuatAction actions={actions[record[MUPM.Status]]} />;
    },
  },
];
